<template>
    姓名：{{name}}  --- 年龄：{{age}} <br />
    姓名：{{name2}}  --- 年龄：{{age2}} <br />
    
</template>

<script>
  import {ref, reactive, toRef, toRefs} from 'vue'

  export default {
    name: 'Vue3Index',
    emits: ['toggle'], //定义说明父组件的自定义事件
    created()
    {
      this.$emit('toggle', false);
    },
    setup()
    {
      //定义一个复杂类型的响应式的数据
      let nameObj1 = reactive({name: '张三'})
      let name = toRef(nameObj1, 'name') //抽离name属性
      let age = toRef(nameObj1, 'age')  //age属性不存在

      //抽离出来的结果是Ref定义的响应式数据
      console.log(name, age)

      setTimeout(() => {
        name.value = 'zhangsan'
        age.value = 20
      }, 1000)


      //toRef 抽离单个属性
      //toRefs 整个对象抽离 整个对象里面的属性都变成响应式

      let nameObj2 = reactive({name2: '李四', age2: 30})
      let { name2, age2 }= toRefs(nameObj2)

      setTimeout(() => {
        name2.value = 'lisi'
        age2.value = 40
      }, 1000)

      return {
        name,
        age,
        name2,
        age2,
      }


    }
  }
</script>